<template>
  <el-dialog :title="!dataForm.id ? '新增' : '修改'" width="40%" :visible.sync="dialogVisible" :close-on-click-modal="false" @close="handleColse">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="submitForm"
      label-width="80px" :size="size" style="text-align:left;">
      <el-form-item label="菜单类型" prop="menuType">
        <el-radio-group v-model="dataForm.menuType">
          <el-radio v-for="(type, index) in menuTypeList" :label="index" :key="index">{{ type }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="menuTypeList[dataForm.menuType] + '名称'" prop="menuTitle">
        <el-input v-model="dataForm.menuTitle" :placeholder="menuTypeList[dataForm.menuType] + '名称'"></el-input>
      </el-form-item>
      <el-form-item label="上级菜单" prop="parentName">
          <treeselect
            v-model="dataForm.parentId"
            :clearable="true"
            placeholder="请选择上级菜单"
            noChildrenText="不好意思哟~,没有下一级了~~"
            :normalizer="normalizer"
            :options="popupTreeData"/>
      </el-form-item>
      <el-form-item v-if="dataForm.menuType !== 0" label="授权标识" prop="perms">
        <el-input v-model="dataForm.perms" placeholder="如: sys:user:add, sys:user:edit, sys:user:delete"></el-input>
      </el-form-item>
      <el-form-item v-if="dataForm.menuType === 1" label="菜单路由" prop="pathUrl">
        <el-row>
          <el-col :span="22">
              <el-input v-model="dataForm.pathUrl" placeholder="菜单路由"></el-input>
          </el-col>
          <el-col :span="2" class="icon-list__tips">
              <el-tooltip placement="top" effect="light" style="padding: 10px;">
                <div slot="content">
                  <p>URL格式：</p>
                  <p>1.常规业务开发的功能URL，如用户管理，Views目录下页面路径为 /Sys/User, 此处填写 /sys/user。</p>
                  <p>2.嵌套外部网页，如通过菜单打开百度网页，此处填写 http://www.baidu.com，http:// 不可省略。</p>
                  <p>示例：用户管理：/sys/user 嵌套百度：http://www.baidu.com 嵌套网页：http://127.0.0.1:8000</p></div>
                <i class="el-icon-warning"></i>
              </el-tooltip>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item v-if="dataForm.menuType !== 2" label="排序编号" prop="sort">
        <el-input-number v-model="dataForm.sort" controls-position="right" :min="0" label="排序编号"></el-input-number>
      </el-form-item>
      <el-form-item v-if="dataForm.menuType !== 2" label="菜单图标" prop="icon">
        <el-row>
          <el-col :span="24">
            <el-popover
              ref="iconListPopover"
              placement="bottom-start"
              trigger="click"
              width="600"
              popper-class="mod-menu__icon-popover">
              <div class="mod-menu__icon-list">
                <el-button
                  v-for="(item, index) in iconList"
                  :key="index"
                  @click="iconActiveHandle(item)"
                  :class="{ 'is-active': item === dataForm.icon }">
                  <icon-svg :name="item"></icon-svg>
                </el-button>
              </div>
            </el-popover>
            <el-input v-model="dataForm.icon" v-popover:iconListPopover :readonly="true" placeholder="菜单图标名称"
                      class="icon-list__input"></el-input>
            <!-- <el-input v-model="dataForm.icon" v-popover:iconListPopover :readonly="false" placeholder="菜单图标名称（如：fa fa-home fa-lg）" class="icon-list__input"></el-input> -->
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button :size="size"  @click="dialogVisible = false">{{$t('action.cancel')}}</el-button>
      <el-button :size="size"  type="primary" @click="submitForm()">{{$t('action.comfirm')}}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import Icon from '@/icons'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { getMenuData, menuSave, getMenuInfo } from '@/api/auth/menu'
export default {
  props: {
    size: {
      type: String,
      default: 'mini'
    }
  },
  data() {
    return {
      iconList: [],
      dialogVisible: false,
      menuTypeList: ["目录", "菜单", "按钮"],
      dataForm: {
        id: '',
        menuType: 1,
        menuTitle: "",
        parentId: null,
        pathUrl: "",
        perms: "",
        sort: 0,
        icon: ""
      },
      dataRule: {
        menuTitle: [
          { required: true, message: "菜单名称不能为空", trigger: "blur" },
          { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
        ]
      },
      popupTreeData: [],
      normalizer(node) {
        return {
          label: node.menuTitle
        }
      }
    }
  },
  components: {
    Treeselect
  },
  created() {
    this.iconList = Icon.getNameList()
    this.getMenuData()
  },
  methods: {
    init(row, type) {
      // 获取上级菜单数据
      this.getMenuData()
      // 清空表单
      this.clearForm()
      // 新增
      if (type === 'add') {
        this.dialogVisible = true
        // 父级菜单为菜单类型
        if (row.menuType === '1') {
          this.dataForm.menuType = 2
        } else if (row.menuType === '0') { // 父级菜单为目录类型
          this.dataForm.menuType = 1
        }
        this.dataForm.parentId = row.id
      } else {
        // 修改
        getMenuInfo(row.id).then(res => {
          if (res.code === 200) {
            this.dialogVisible = true
            res.data.menuType = parseInt(res.data.menuType)
            this.dataForm = res.data
            if (res.data.parentId === '0' || res.data.parentId === null) {
              this.dataForm.parentId = null
            }
          }
        })
      }
    },
    // 获取菜单数据--没有button类型
    getMenuData() {
      getMenuData().then(res => {
        this.popupTreeData = [{
          id: '',
          parentId: null,
          menuTitle: "顶级菜单",
          children: res.data
        }]
      })
    },
    // 图标选中
    iconActiveHandle(iconName) {
      this.dataForm.icon = iconName;
    },
    // 表单提交
    submitForm() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            let params = Object.assign({}, this.dataForm)
            menuSave(params).then(res => {
              if (res.code == 200) {
                this.dialogVisible = false
                this.$emit('refreshTable')
              }
            })
          }).catch(() => {})
        }
      })
    },
    // 清空表单
    clearForm() {
      this.parentMenuName = ''
      for (let item in this.dataForm) {
        this.dataForm[item] = ''
        if (item === 'parentId') {
          this.dataForm[item] = null
        } else if (item === 'sort') {
          this.dataForm[item] = 0
        } else if (item === 'menuType') {
          this.dataForm[item] = 1
        }
      }
    },
    handleColse() {
      this.$refs.dataForm.resetFields()
    }
  }
}
</script>